<template>
    <div class="chooseSeat">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        {{filmName}}
      </div>
      <div class="content">
        <div class="detail">
          <div class="left">
            <p class="name">{{cinemaName}}</p>
            <p class="info">{{playingTimeDesc+' '+filmTypeVersion}}</p>
          </div>
          <div class="right">
            <button class="choose" @click="_isListScroll">换一场</button>
          </div>
        </div>
        <div class="cinemaList-wrapper">
          <div class="tips">
            <span class="ball"></span> 可选
            <span class="ball isChoose"></span> 售出
          </div>
          <div class="seat-list-wrapper" ref="seat-list-wrapper" @dblclick="_initScroll">
            <div class="seat-list-content">
              <div class="seat-screen" >

              </div>
              <div class="scroll-touch-container" ref="scroll-touch-container" style="height: 263px;overflow: hidden">
                <div class="scroll-touch-wrapper" ref="scroll-touch-wrapper">
                  <v-touch style="position: relative;width: 100%;height: 354px;overflow: hidden" ref="wrapper"  v-on:panstart="_touchEvent" v-on:panmove="_touchEvent"  v-on:pinchin="_touchEvent" v-on:pinchstart="_touchEvent" v-on:pinchout="_touchEvent"  class="wrapper">
                    <div class="seat-list-container" ref="seat-list-container" style=" margin: 0 auto;position: relative;top:0;left: 0">

                      <div class="seat-wrapper" v-for="item in seatList"
                           style="display: inline-block;position: absolute"
                           :style="{padding: 4*multiple+'px', top:(parseInt(item.x)-1)*(20+(8*multiple))*multiple+'px',left:(parseInt(item.y)-1)*(20+(8*multiple))*multiple+'px',width:20*multiple+'px',height:20*multiple+'px'}">
                        <seat :seatInfo="item"
                              @addChooseSeat="_addChooseSeat"
                              :chooseSeatList="chooseSeatList"
                              @delChooseSeat="_delChooseSeat"
                        ></seat>
                      </div>
                    </div>
                  </v-touch>
                </div>
              </div>
              <div class="chooseSeat-wrapper">
                <p class="name">已选座位</p>
                <transition name="fade">
                  <div class="content" ref="chooseSeat-container" v-show="chooseSeatList.length">
                    <div class="chooseSeat-container"ref="choose-box" >
                      <div class="chooseSeat-item" v-for="item in chooseSeatList" @click="_delRelevanceSeat(item)">
                        <div class="ball ball-top-left"></div>
                        <div class="ball ball-top-right"></div>
                        <div class="ball ball-bottom-left"></div>
                        <div class="ball ball-bottom-right"></div>
                        <div class="address">{{item.rowNum+'排'+item.colNum+'座'}}</div>
                        <div class="price">￥{{item.seatPrice}}</div>
                        <div class="close" ></div>
                      </div>
                    </div>
                  </div>
                </transition>
              </div>
            </div>
          </div>
        </div>
      </div>
      <transition name="fade">
        <div class="mask-confirm-layer" v-show="maskConfirm">
          <div class="alert-container" @click.stop>
            <div class="top border-1px">温馨提示</div>
            <div class="content border-1px">{{msg}}</div>
            <div class="bottom" @click="">
              <div class="left" @click="$router.push('/choosePreferential')">确定</div>
              <div class="line"></div>
              <div class="right" @click="_releaseSeat">取消</div>
            </div>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div class="mask-layer" v-show="maskLayer" @click="maskLayer=false">

        </div>
      </transition>
      <transition name="fade">
        <div class="list-wrapper" v-show="maskLayer">
          <div class="list-title">
            <span class="cancel" @click="maskLayer=false"></span>
            换一场
          </div>
          <div class="list-content" ref="list-content">
            <div class="sc" style="">
              <div class="list-item" v-for="item in chooseSessionList">
                <div class="list-block">
                  <div class="start-time">{{item.playingTimeDesc}}</div>
                  <div class="end-time">{{item.endTimeDesc}}</div>
                </div>
                <div class="list-block">
                  <div class="type">{{item.filmTypeVersionDesc}}</div>
                  <div class="address">{{item.movieHallName}}</div>
                </div>
                <div class="list-block">
                  <div class="price">¥{{item.settlePrice}}</div>
                  <div class="original">{{item.listingPrice}}</div>
                </div>
                <div class="list-block"><button class="btn" @click="_chooseSession(item.id)">{{item.statusDesc}}</button></div>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <div class="btn-wrapper">
        <button class="btn" @click="_confirmationOptions">{{_chooseTotalPrice}}</button>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import seat from '../../../components/seat/seat'
  import global from '../../../common/js/global'
  import BScroll from 'better-scroll'
  import {getStorage,setStorage} from "../../../common/js/localStorage";
  import {Toast} from 'mint-ui'
  let startWidth = ''
  let maxWidth = ''
  let minWidth = ''
  let beforeX = 0
  let beforeY = 0
    export default {
        name: "chooseSeat",
        components:{
          'back':back,
          'seat':seat
        },
        created(){

        },
        data(){
          return{
            maskConfirm:false,
            msg:'',
            maskLayer:false,
            cinemaName:'',
            filmName:'',
            filmTypeVersion:'',
            movieHallName:'',
            playingTimeDesc:'',
            seatList:[],
            maxX:0,//x轴最大阶数
            maxY:0,//y轴最大阶数
            multiple:1,//倍数
            testInfo:[{},{},{},{}],
            chooseSeatList:[],//选中座位
            chooseSessionSendData:{},
            chooseSessionList:[],
            movieSessionId:0,
            hallId:'',
            totalPrice:'',
            lockSeatFlowId:''
          }
        },
        methods:{
          //释放座位
          _releaseSeat(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/member/releaseSeat',
                data:{
                  lockSeatFlowId:this.lockSeatFlowId
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.maskConfirm = false
                  this._getSeatInfo()
                }else {

                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _confirmationOptions(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/member/confirmSeat',
                data:{
                  movieSessionId:this.$route.query.movieSessionId,
                  hallId:this.hallId,
                  cinemaId:this.chooseSessionSendData.cinemaId,
                  confirmSeatIdList:this._getConfirmSeatIdList(),
                  seatPrice:this.totalPrice
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.$router.push({path:'/choosePreferential'})
                  setStorage('chooseSeatInfo',data)
                  if(getStorage('chooseSeatInfo')){
                    this.$router.push({path:'/choosePreferential'})
                  }
                }else if(res.data.code===10){
                  this.$router.push('/login')
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _chooseSession(id){
            this.movieSessionId = id
            this.$router.push({query:{movieSessionId:id}})

          },
          _touchEvent(e){
            if(e.type==='panstart'){
              beforeX=parseInt(this.$refs['seat-list-container'].style.left)
              beforeY=parseInt(this.$refs['seat-list-container'].style.top)
            }
            if(e.type==='panmove'){
              if(Math.abs(e.deltaX+beforeX)>this.$refs['seat-list-container'].clientWidth-50||Math.abs(e.deltaY+beforeY)>this.$refs['seat-list-container'].clientHeight-50){
                return
              }
              this.$refs['seat-list-container'].style.left=e.deltaX+beforeX+'px'
              this.$refs['seat-list-container'].style.top=e.deltaY+beforeY+'px'
            }
            let ratio =  this.$refs['seat-list-container'].clientWidth/this.$refs['seat-list-container'].clientHeight
            if(e.type==='pinchin'){
              // this.$refs['seat-list-container'].clientHeight
              if(minWidth<=this.$refs['seat-list-container'].clientWidth){
                this.$refs['seat-list-container'].style.width=this.$refs['seat-list-container'].clientWidth -Math.abs(e.deltaX)+'px'
                this.$refs['seat-list-container'].style.height=this.$refs['seat-list-container'].clientWidth*ratio+'px'
                this.multiple =this.$refs['seat-list-container'].clientWidth/ startWidth
              }
            }else if(e.type==='pinchout'){
              if(maxWidth>=this.$refs['seat-list-container'].clientWidth){
                this.$refs['seat-list-container'].style.width=this.$refs['seat-list-container'].clientWidth +Math.abs(e.deltaX)+'px'
                this.$refs['seat-list-container'].style.height=this.$refs['seat-list-container'].clientWidth*ratio+'px'
                this.multiple =this.$refs['seat-list-container'].clientWidth/ startWidth
              }
            }
          },
          _delRelevanceSeat(info){
            this._delChooseSeat(info)
            this.seatList[info.index].isChoose = false
          },
          _addChooseSeat(info){
            //若选中座位等于四个则不再增加，反之则加入数组
            if(this.chooseSeatList.length<4){
              this.chooseSeatList.push(info)
            }
          },
          _delChooseSeat(info){
            for(let i=0;i<this.chooseSeatList.length;i++){
              if(this.chooseSeatList[i].index === info.index){
                this.chooseSeatList.splice(i,1)
              }
            }
          },
          _getChooseSessionList(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/changeOneMovieSession',
                data:this.chooseSessionSendData
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.chooseSessionList = data.calendarList[0].movieSessionList
                }else {

                }
              }else {
                // Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _isListScroll(){
            this.maskLayer=true
            this.$nextTick(()=>{
              if(!this.scroll){
                let scroll = new BScroll(this.$refs['list-content'],{click:true})
              }else {
                this.scroll.refresh()
              }
            })
          },
          _getSeatInfo(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:global.$host+'/chooseSeat',
                data:{
                  movieSessionId:this.$route.query.movieSessionId
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  if(!res.data.data.bizCode){
                    let data = res.data.data.seatInfoModel
                    this.cinemaName = data.cinemaName
                    this.filmName = data.filmName
                    this.filmTypeVersion = data.filmTypeVersion
                    this.movieHallName = data.movieHallName
                    this.playingTimeDesc = data.playingTimeDesc
                    this.hallId = data.hallId
                    this.chooseSessionSendData={
                      cinemaId:data.cinemaId,
                      filmId:data.filmId,
                      playingDateInt:data.playingDateInt
                    }
                    for(let i = 0 ;i <data.seatList.length; i++){
                      data.seatList[i].isChoose = false
                      data.seatList[i].index = i
                    }
                    this.seatList = data.seatList
                  }else{
                    this.msg = res.data.data.msg
                    this.maskConfirm = true
                    this.lockSeatFlowId = res.data.data.lockSeatFlowId
                  }

                }else {

                }
              }else {
                // Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _initScroll(){
            this.$nextTick(()=>{
              if(!this.scroll){
                // return
                this.$refs['choose-box'].style.width = 84*4+'px'
                let scroll = new BScroll(this.$refs['chooseSeat-container'],{click:true,scrollX:true})
              }else {
                this.scroll.refresh();
              }
            })
          },
          _getConfirmSeatIdList(){
            let confirmSeatIdList = []
            let totalPrice = 0
            for (let i = 0;i<this.chooseSeatList.length;i++){
              confirmSeatIdList.push(this.chooseSeatList[i].seatId.toString())
              totalPrice+= this.chooseSeatList[i].seatPrice
              this.totalPrice = totalPrice
            }
            return confirmSeatIdList
          }
        },
        mounted() {
          this._getSeatInfo();
          startWidth = this.$refs['seat-list-container'].clientWidth
          minWidth = this.$refs['seat-list-container'].clientWidth*0.75
          maxWidth = this.$refs['seat-list-container'].clientWidth*2
        },
        watch:{
          'movieSessionId'(){
            this.$router.go(0)
          },
          'chooseSessionSendData'(){
            this._getChooseSessionList()
          },
          'seatList'(){
            let MaxX = 0
            let MaxY = 0
            for (let i = 0; i < this.seatList.length; i++){
              MaxX<parseInt(this.seatList[i]['x'])?MaxX=parseInt(this.seatList[i]['x']):''
              MaxY<parseInt(this.seatList[i]['y'])?MaxY=parseInt(this.seatList[i]['y']):''
            }
            this.maxX = MaxX
            this.maxY = MaxY
          },
          'maxX'(){
            this.$refs['seat-list-container'].style.height = this.maxX*(20+8*this.multiple)*this.multiple+'px'
          },
          'maxY'(){
            this.$refs['seat-list-container'].style.width = this.maxY*(20+8*this.multiple)*this.multiple+'px'
          },
          'chooseSeatList'(){
            this.$nextTick(()=>{
              if(!this.scroll){
                this.$refs['choose-box'].style.width = 84*this.chooseSeatList.length+'px'
                let scroll = new BScroll(this.$refs['chooseSeat-container'],{click:true,scrollX: true})
              }else {
                this.scroll.refresh()
              }
            })

          }
        },
        computed:{
          _chooseTotalPrice(){
            let text = 0
            if(this.chooseSeatList.length){
              for (let i = 0;i<this.chooseSeatList.length;i++){
                text += this.chooseSeatList[i].seatPrice
              }
              return text+'元 确认选座'
            }else {
              return '确认选座'
            }
          },
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .chooseSeat
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      position relative
      height calc(100% - 86px)
      .cinemaList-wrapper
        height calc(100% - 81px)
        .tips
          width 120px
          color #8B929E
          font-size 12px
          height 12px
          line-height 12px
          margin 0 auto
          .ball
            display inline-block
            height 12px
            width 12px
            border-radius 6px
            background #555B64
            vertical-align bottom
            &.isChoose
              background #EEAC21
              margin-left 26px
        .seat-list-wrapper
          padding-top 10px
          height calc(100% - 22px)
          .seat-list-content
            .seat-screen
              height 11px
              background url("bg_screen.svg")no-repeat center center/244px 11px
      .detail
        height 61px
        display flex
        padding 10px
        .left
          flex 1
          text-align left
          .name
            color #FFFFFF
            font-size 16px
            height 22px
            line-height 22px
          .info
            padding-top 2px
            height 17px
            line-height 17px
            font-size 12px
            color #8B929E
        .right
          flex 0 0 50px
          .choose
            border none
            background none
            padding 0
            color #ffffff
            font-size 14px
            outline none
    .chooseSeat-wrapper
      position absolute
      bottom 0
      width calc(100% - 20px)
      padding 6px 10px
      background #171718
      .name
        height 17px
        line-height 17px
        font-size 12px
        color #8B929E
        text-align left
      .content
        height 58px
        overflow hidden
        &.fade-enter-active, &.fade-leave-active
          transition height .3s
        &.fade-enter, &.fade-leave-to
          height 0
        .chooseSeat-container
          text-align left
          height 100%
          font-size 0
          overflow hidden
          .chooseSeat-item
            position relative
            overflow height
            margin-top 7px
            display inline-block
            height 44px
            width 76px
            margin-right 8px
            background #212122
            .address
              height 17px
              line-height 17px
              font-size 12px
              color #ffffff
              text-align center
              padding-top 6px
              padding-right 10px
            .price
              padding-right 10px
              height 20px
              line-height 20px
              color #F7C20F
              font-size 14px
              text-align center
            .close
              position absolute
              height 9px
              width 9px
              background url("icon_cancel.svg")no-repeat center /9px 9px
              right 6px
              top 18px
            .ball
              position absolute
              height 12px
              width 12px
              background #171718
              border-radius 6px
              &.ball-top-left
                top -6px
                left -6px
              &.ball-top-right
                top -6px
                right -6px
              &.ball-bottom-left
                bottom -6px
                left -6px
              &.ball-bottom-right
                bottom -6px
                right -6px
    .mask-layer
      position absolute
      bottom 0
      z-index 1000
      width 100%
      height calc(100% - 42px)
      background rgba(0,0,0,.7)
      &.fade-enter-active, &.fade-leave-active
        transition: opacity .3s;
      &.fade-enter, &.fade-leave-to
        opacity: 0;
    .mask-confirm-layer
      position absolute
      bottom 0
      z-index 1000
      width 100%
      height calc(100% - 42px)
      background rgba(0,0,0,.7)
      &.fade-enter-active, &.fade-leave-active
        transition: opacity .3s;
      &.fade-enter, &.fade-leave-to
        opacity: 0;
      .alert-container
        position relative
        top 120px
        width calc(100% - 80px)
        margin 0 auto
        background #171718
        border-radius 3px
        overflow hidden
        .top
          height 44px
          color #ffffff
          line-height 44px
          font-size 16px
          border-1px(#525252)
        .content
          padding 10px 12px
          text-align left
          border-1px(#525252)
          min-height 80px
          font-size 14px
          line-height 17px
          color #ffffff
        .bottom
          display flex
          height 44px
          line-height 44px
          font-size 16px
          color #F7C20F
          .left,.right
            flex 1
          .left
            &:active
              background #525252
          .right
            &:active
              background #525252
          .line
            flex 0 0 1px
            background #525252
  .list-wrapper
      position absolute
      bottom 0
      width 100%
      z-index 1000
      transform translate(0,0%)
      transition transform 1s
      opacity 1
      &.fade-enter-active, &.fade-leave-active
        transition transform 0.3s
      &.fade-enter, &.fade-leave-to
        transform translate(0,100%)
      .list-title
        color #ffffff
        position relative
        height 41px
        line-height 41px
        text-align center
        font-size 16px
        background #212122
        .cancel
          position absolute
          right 10px
          top 15px
          display inline-block
          height 10px
          width 10px
          background url("icon_cancel.svg")no-repeat
      .list-content
        position relative
        color #ffffff
        max-height 355px
        overflow hidden
        background #171718
        .list-item
          display flex
          padding 15px 10px
          &:nth-child(odd)
            background #101011
          &:nth-child(even)
            background #171718
          .list-block
            flex 1
            .start-time
              color #ffffff
              height 22px
              line-height 22px
              font-size 16px
            .end-time
              height 16px
              line-height 16px
              color #8B929E
              font-size 11px
              padding-top 3px
            .type
              height 22px
              line-height 22px
              color #ffffff
              font-size 14px
            .address
              height 16px
              line-height 16px
              font-size 11px
              color #8B929E
              padding-top 3px
            .price
              height 22px
              line-height 22px
              color #F7C20F
            .original
              height 16px
              line-height 16px
              padding-top 3px
              font-size 11px
              color #8B929E
              text-decoration line-through
            .btn
              position relative
              top calc(50% - 14px)
              height 28px
              background #F7C20F
              border none
              width 56px
              border-radius 14px
              color #161719
              font-size 13px
              outline none
            &:first-child
              flex 0 0 75px
              padding-right 20px
            &:last-child
              flex 0 0 70px
              position relative
              text-align right
            &:nth-child(2)
              text-align left

    .btn-wrapper
      position fixed
      bottom 0
      height 44px
      width 100%
      .btn
        width 100%
        height 44px
        border none
        background #F7C20F
        color #161719
        font-size 16px
        outline none

</style>
